<template>
  <div />
</template>
<script>
export default {
  props: {
    // title: {
    //   type: String,
    //   default: 'chart'
    // },
    name: {
      type: String,
      default: ''
    },
    legend: {
      type: Object,
      default: () => {
        return {
        //   orient: 'vertical'
          data: []
        }
      }
    },
    color: {
      type: Array,
      default: () => {
        return ['#F5C022','#E96C5A','#0083F7']
      }
    },
    series: {
      type: Array,
      default: () => {
        return [{
          name: 'chart',
          data: []
        }]
      }
    },
    tooltip: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pieType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      chart: null,
      option: {
        // title: {
        //   text: this.title,
        //   left: 'left'
        // },
        tooltip: { // 鼠标移动到圈圈上显示的文字
          trigger: 'item',
          formatter: '{b}: {c} (占比 : {d}%)'
        //   backgroundColor: '#ccc'
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          right: '0%', // 图例位置
          data: [],
          top: 70,
          //   textStyle: {
          //     color: '#fff'
          //   },
          formatter: (name) => { // 图例名称
            // console.log(name)
            if (name.length > 6) {
              name = name.slice(0, 8) + '...'
            }
            return name
          }
        },
        series: [
          {
            name: '占比情况',
            right: '30%', // 饼图位置
            type: 'pie',
            radius: '55%',
            radius: ['30%', '60%'],
            // center: ['50%', '60%'],
            color: this.color,
            avoidLabelOverlap: false,
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  watch: {
    tooltip: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          tooltip: newVal
        })
      }
    },
    series: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          series: newVal
        })
      }
    },
    color: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          color: newVal
        })
      }
    },
    legend: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          legend: newVal
        })
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    // this.destroyed()
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption(this.option)
    }
    // destroyed() {
    //   if (!this.chart) {
    //     return
    //   }
    //   this.chart.dispose()
    //   this.chart = null
    // }
  }
}
</script>
